<template>
	<!-- 专题聚焦 -->
	<div class="specialBox">
		<div class="container">
			<div class="pictrueTitle home_title">专题聚焦</div>
			<div class="swiper-container1">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="(item,index) in records" :data-swiper-slide-index="index" :key="index"
						style="width: 200px;">
						<a class="swiper-box" :href="Path + item?.url" target="_blank">
							<div class="img-box">
								<img class="img1" :src="item.headImageUrl" alt="" />
							</div>
							<p class="p1">{{ item.name }}</p>
						</a>
					</div>
				</div>
			</div>
		 
		<span class="swiperButton swiperButton_left"><span class="iconfont icon-a-Leftarrow"></span></span>
		<span class="swiperButton swiperButton_right"><span class="iconfont icon-a-Rightarrow"></span></span>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					pageSize: 5,
					pageNum: 1
				},
				records: [
					// {
					// 	id: 1,
					// 	headImageUrl: 'https://img2.baidu.com/it/u=2022030374,3955090613&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
					// 	name: '专题聚焦专题聚焦专1焦'
					// },

					// {
					// 	id: 1,
					// 	headImageUrl: 'https://img2.baidu.com/it/u=2022030374,3955090613&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
					// 	name: '专题聚焦专题聚焦专2题聚焦'
					// },
					// {
					// 	id: 1,
					// 	headImageUrl: 'https://img2.baidu.com/it/u=2022030374,3955090613&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
					// 	name: '专题聚焦专题聚焦3聚焦'
					// },
					// {
					// 	id: 1,
					// 	headImageUrl: 'https://img2.baidu.com/it/u=2022030374,3955090613&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
					// 	name: '专题4专题聚焦'
					// },
					// {
					// 	id: 1,
					// 	headImageUrl: 'https://img2.baidu.com/it/u=2022030374,3955090613&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
					// 	name: '专题聚焦专5焦专题聚焦'
					// },
				],
				Path: getRootPath(),
				activeTitle: '',
				activeSumay: ''
			};
		},
		created() {},
		mounted() {
			this.headline();
		},
		methods: {
			inintSlide() {
				var swiper = new Swiper('.swiper-container1', {
					slidesPerView: 5,
					spaceBetween: 24,
					navigation: {
					    nextEl: ".swiperButton_right",
					    prevEl: ".swiperButton_left",
					},
					centeredSlides: true,
					loop: true,
					pagination: {
						el: '.swiper-pagination',
						clickable: true,
					},
				});
			},
			headline() {
				contentApi.fetchSpecialOfChannel(this.params, res => {
					if (res.code == '00000 00000') {
						this.records = res.data.records;
						
						console.log(this.records, 'this.recordsthis.records');
						this.$nextTick(() => {
							this.inintSlide();
						});
					} else {}
				});
			},
			getImgPath(url) {
				return imgPath(url);
			},
			goTopicList(item) {
				console.log(item, 'item')
			},
		}
	};
</script>

<style scoped="scoped">
	.specialBox {
		position: relative;
		width: 1200px;
		margin: auto;
		margin-top: 60px;
		overflow: hidden;
		padding: 0 40px;
	}

	.specialBox .container {
		width: 1200px;
		overflow: hidden;
	}

	.specialBox .swiperButton_left {
		/* display: flex;
	justify-content: center; */
		width: 40px;
		height: 40px;
		position: absolute;
		top: 115px;
		left: 20px;
		z-index: 1;
		background-color: #fff;
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
		border-radius: 50%;
		text-align: center;
		line-height: 40px;
	}

	.specialBox .swiperButton_right {
		/* display: flex;
	justify-content: center; */
		width: 40px;
		height: 40px;
		position: absolute;
		top: 115px;
		right: 18px;
		z-index: 1;
		background-color: #fff;
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
		border-radius: 50%;
		text-align: center;
		line-height: 40px;
	}

	.specialBox .swiperButton_left .iconfont {
		font-size: 24px;
		color: #333333;
	}

	.specialBox .swiperButton:hover .iconfont {
		color: #FF3333;
	}

	.specialBox .swiperButton:hover {
		cursor: pointer;
	}

	.specialBox .swiperButton_right .iconfont {
		font-size: 24px;
		color: #333333;
	}

	.specialBox .pictrueTitle {
		text-align: center;
		height: 30px;
		font-size: 30px;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 30px;
		cursor: pointer;
		position: relative;
	}

	.specialBox .pictrueTitle::after {
		position: absolute;
		width: 82px;
		height: 2px;
		background-color: #EFEFEF;
		left: calc(50% + 84px);
		;
		top: 15px;
		content: '';
		z-index: 1;
	}

	.specialBox .pictrueTitle::before {
		position: absolute;
		width: 82px;
		height: 2px;
		background-color: #EFEFEF;
		right: calc(50% + 84px);
		top: 15px;
		content: '';
		z-index: 1;
	}

	.specialBox .pictrue {
		display: flex;
		margin-top: 24px;
	}

	.specialBox .swiper-container1 {
		position: relative;
		margin-top: 40px;
		width: 1200px;
		height: 206px;
	}

	.specialBox .swiper-container1 .swiper-wrapper {
		width: 224px;
		height: 158px;
		margin-left:-26px;
	}

	.specialBox .swiper-container1 .swiper-wrapper .img-box {
		width: 224px;
		height: 126px;
		overflow: hidden;
		border-radius: 4px;
	}

	.specialBox .swiper-container1 .swiper-wrapper .swiper-slide-active .img-box {
		overflow: hidden;
		border-radius: 4px;
		transform: scale(1.25);
		transition: .3s;
	}

	.specialBox .swiper-container1 .swiper-wrapper .swiper-slide-active {
		margin-left: 30px;
	}

	.specialBox .swiper-container1 .swiper-wrapper .swiper-slide-next {
		margin-left: 30px;
	}

	.specialBox .swiper-container1 .swiper-wrapper .swiper-slide-active .img1 {
		width: 100%;
		height: 100%;
		/* transform: scale(1.25); */
		/* margin-right: 50px; */
	}

	.specialBox .swiper-container1 .swiper-wrapper .swiper-slide-active .p1 {
		margin-top: 32px;
	}

	.specialBox .swiper-container1 .swiper-wrapper .swiper-box .p1:hover {
		color: #FF3333;
	}

	.specialBox .swiper-container1 .swiper-wrapper .swiper-slide-active .swiper-box .p1 {
		margin-top: 32px;
	}

	.specialBox .swiper-container1 .img1 {
		border-radius: 4px;
		width: 100%;
		height: 100%;
		margin: auto;
		overflow: hidden;
	}


	/* 	.specialBox .swiper-container1 .swiper-wrapper .swiper-box {
		width: 224px;
	} */


	.specialBox .swiper-container1 .swiper-wrapper .swiper-box .p1 {
		margin-top: 16px;
		width: 224px;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 24px;
		text-align: center;
	}

	.specialBox .pictrueList {
		position: relative;
	}

	.specialBox .ptitle {
		/* position: absolute; */
		margin-top: 16px;
		width: 224px;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 24px;
		text-align: center;
		-webkit-background-clip: text;
	}

	.specialBox .centertitle {
		width: 280px;
	}

	.specialBox .pictrueList1 {
		margin-right: 24px;
		width: 224px;
		height: 126px;
		border-radius: 4px;
		overflow: hidden;
	}

	.specialBox .centerImg {
		width: 280px;
		height: 158px;
	}

	.specialBox .pictrueList1 .img1 {
		border-radius: 4px;
		width: auto;
		height: auto;
		margin: auto;
	}

	.specialBox .swiper-container1 .swiper-wrapper .img1:hover {
		transform: scale(1.1);
	}


	.specialBox .pictrueList2 {
		margin-left: 40px;
		width: 368px;
		height: 446px;
		overflow: hidden;
	}

	.specialBox .pictrueList2 .img1 {
		border-radius: 4px;
		width: auto;
		height: auto;
		margin: auto;

	}

	.specialBox .pictrueList2 .img1:hover {
		transform: scale(1.1);
	}

	.specialBox .pictrueList2 .p2 {
		padding: 24px;
		bottom: 0;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
		height: 18px;
		font-size: 18px;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 18px;
		height: 172px;
		line-height: 228px;
		box-sizing: border-box;
		background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.78) 51%, rgba(255, 255, 255, 0) 100%);
		z-index: 1;
	}

	.specialBox .pictrueList345 {
		width: 373px;
		height: 380px;
		margin-top: 40px;
		margin-left: 40px;
		box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.06);
		overflow: hidden;
	}

	.specialBox .pictrueList345 .img1 {
		border-radius: 4px 4px 0px 0px;
		width: 373px;
		height: 280px;
		margin: auto;
	}

	.specialBox .pictrueList345 .img1:hover {
		transform: scale(1.1);
	}

	.specialBox .pictrueList345 .p3 {
		padding: 24px;
		bottom: 0;
		font-size: 18px;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 26px;
		border-radius: 0px 0px 4px 4px;
		background-color: #fff;

	}

	.specialBox .pictrueList345 .p3 .span3 {
		width: 325px;
		height: 52px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		white-space: pre-wrap;
	}

	.specialBox .pictrueList345:hover {
		box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.1);
	}

	.specialBox .pictrueList3 {
		margin-left: 0;
	}
</style>